<template>
<div class="container">
    <el-form ref="form" :model="form" label-width="80px">
    <el-row>
        <el-col :span="5" style="min-width:230px">
            <div class="container" style="min-height:300px;">
               <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="组织架构" name="组织架构">
                        <el-tree 
                            @node-click="handleNodeClick"
                            default-expand-all
                            :data="data"
                            :props="customProps">
                        </el-tree>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane label="员工" name="员工"> -->
                        <el-input style="border-radius: 0 5px 5px 0;font-size:8px;" placeholder="请输入关键字" @change="searchstaff" v-model="searchName">
                            <el-button slot="append" @click="handleSearch">搜索</el-button>
                        </el-input>
                        <div class="staffcontent">
                            <div class="staffuser" :class="{ active:index==isActive }" v-for="(item,index) in userList"  @click="handlestaff(index)" :key="index">
                                <span class="name-circle" :class="{ activeone:index==isActive }">{{item.username}}</span>
                                <span style="margin-left:20px;">{{item.name}}</span>
                                <span style="float:right;">{{item.phone}}</span>
                            </div>
                        </div>
                    <!-- </el-tab-pane> -->
                <!-- </el-tabs> -->
            </div>
        </el-col>
        <el-col :span="18" style="margin-left:10px;" >
            <div class="container" style="min-height:70%;">
				<h3>{{name}}</h3>
                <el-tabs v-model="activetabs">
                    <el-tab-pane v-for="(item,index) in companyPermissionList" :key="index" :label="item.appName" :name="item.appName">
                        <el-checkbox-group v-model="checked" style="margin-top:20px;" >
                            <div v-for="(item,zindex) in item.permissionList" :key="zindex" class="checkbox-content" >
                                <el-checkbox  :label="item.id">{{item.name}}</el-checkbox>
                                <el-checkbox-group v-model="checked" class="checked-right" style="margin-top:20px; display:inline-block;">
                                    <el-checkbox v-for="(s,sindex) in item.children" @change="handlecheckbox(sindex)"  :key="sindex" :label="s">{{s.name}}</el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-checkbox-group>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-col>  
    </el-row>
	<el-form-item class="footerFixed" v-if="added" label-width="0px" style="z-index: 2000;">
        <el-button type="primary"  @click="menu_save">提交</el-button>
    </el-form-item>
    </el-form>
</div>
 
</template>

<script>
	import {
		resource_company_appMenus,
		resource_user_appMenus,
		resource_set_appMenus
	} from "@/request/breedApi"
	import { user_findByAll } from "@/request/api"
    export default {
        inject:['reload'],
        data() {
            return {
				isActive:-1,
				companyPermissionList:'',
                num:"",
                ifshow:false,
                added:true,
                activetabs:'',
                userList:'',
                searchName:'',
                form:{},
                disabled:true,
                list:[],
                checked:[],
                checkeds:[],
                shangji:'',
                bumen:'',
                defaultProps:{
                    children:'',
                    label:'label'
                },
                tableData: [],
                data: [],
                isShow:true,
                delid:'',
                departmentId:'',
                customProps:{
                    label:'name',
                    children:'children',
                    id:'id'
                },
				userid:'',
				name:''
            };
        },
        mounted(){
			this.init()
            this.init1()
         
        },
        created(){
			
        },
        methods: {
			// 点击员工 回显 员工的权限 
            handlestaff(index){
				this.isActive = index
				this.userid = this.userList[index].id
				this.name = this.userList[index].name
				this.checked = []
				resource_user_appMenus(this.userList[index].id).then((res)=>{
					// this.checked
					var userPermissionList = res.data
					for (var i = 0; i < userPermissionList.length; i++) {
						for (var s = 0; s < userPermissionList[i].menus.length; s++) {
							if(userPermissionList[i].menus[s].checked == true){
								this.checked.push(userPermissionList[i].menus[s].id)
							}
						}
					}
				})
            },
            handleClick(){

            },
			// change 触发搜索
            searchstaff(){
                this.init()
            },
			// 点击搜索员工
            handleSearch(){
                this.init()
            },
           
			// 获取所有的员工
			init(){
				user_findByAll("?name="+this.searchName).then((res)=>{
					this.userList = res.data
					for (let i = 0; i < this.userList.length; i++) {
					   this.userList[i].username = this.userList[i].name.substring(0,1)
					  
					}
				})
			},
			// 根据 公司id 获取 所有的权限
            init1(){
				let id = localStorage.getItem("ms_id")
				resource_user_appMenus(id).then((res)=>{
					this.companyPermissionList = res.data
					this.activetabs = res.data[0].appName
					for(var i=0;i<this.companyPermissionList.length;i++){
						this.companyPermissionList[i].permissionList = this.companyPermissionList[i].menus
					}
				})
            },
            // 权限保存
            menu_save(){
                var arr = []
                for (let i = 0; i < this.checked.length; i++) {
                    arr.push({appId:this.checked[i].appId,resourceId:this.checked[i].id})
                }
                this.$confirm('是否确认提交', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
					let data = {
						userId:this.userid,
						menus:arr
					}
                    resource_set_appMenus(data).then((res)=>{
						this.$notify({
						    title: '提示',
						    message: '保存成功',
						    type: 'success',
						    duration:1000
						});
					})
					this.init()
					this.init1()
                })
            },
        }
    }
</script>

<style scoped>	
.active{					
	background:#CCEEFF;
}
.activeone{
	background:#33CCFF !important;
}
.name-circle{
    width:25px;
    line-height:25px;
    text-align: center;
    height:25px;
    border-radius: 50%;
    background:#909399;
    display: inline-block;	
}
.staffuser{
    font-size:12px;
    height:35px;
    line-height:35px;
    cursor: pointer;
}
.staffcontent{
    margin-top:20px;
    height:300px;
    overflow-y: auto;
}
.checked-right{
    position: absolute;
    left:150px;
    top:-12px;
}
.checkbox-content{
    height:30px;
    line-height:30px;
    position: relative;
    border: 1px solid #dcdfe6;
    padding:8px;
}
.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>